<script>
import { getShowImage } from "../../../../../utils";

export default {
  name: "userAnswer",
  methods: {
    getShowImage,
    previewImage(url) {
      uni.previewImage({
        urls: [this.getShowImage(url)],
      });
    },
  },
  props: {
    details: {
      type: Object,
      default: () => {
        return {
          userAnswer: "",
          userAnswerImage: "",
        };
      },
    },
  },
};
</script>

<template>
  <view class="component">
    <template v-if="details.userAnswer || details.userAnswerImage">
      <view class="title">
        <view class="point"></view>
        <view>你的作答</view>
      </view>
      <view class="input-container" v-if="details.userAnswer">
        <text>{{ details.userAnswer }}</text>
      </view>
      <view class="image-container" v-if="details.userAnswerImage">
        <image
          class="image"
          @click="previewImage(details.userAnswerImage)"
          :src="getShowImage(details.userAnswerImage)"
          mode="aspectFill"
        ></image>
      </view>
    </template>
  </view>
</template>

<style scoped lang="scss">
.component {
  padding: 30rpx;
  border: 2rpx solid var(--border-color);
  border-radius: 30rpx;
  .title {
    font-size: calc(36rpx * var(--font-size-rate));
    font-weight: bold;
    display: flex;
    > .point {
      width: 10rpx;
      height: 30rpx;
      background: var(--theme-color);
      margin-right: 20rpx;
      margin-top: 10rpx;
    }
  }
  .input-container {
    padding: 30rpx;
    background: var(--gray-background-color);
    margin-top: 30rpx;
    border-radius: 30rpx;
    font-size: calc(32rpx * var(--font-size-rate));
    //文本溢出自动换行
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
  }
  .image-container {
    width: 260rpx;
    height: 260rpx;
    border-radius: 20rpx;
    margin-top: 30rpx;
    .image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
